<template>
	<div>
    <div class="container">
		<div class="handle-box">
		    <el-row class="top-btn">
     			<!-- <el-button-group class="ml-4"> -->
                    <el-button color="#0ab394"  @click="open">添加章</el-button>                         
       		 <!-- </el-button-group> -->
			</el-row>
            <div class="div-input">
                <el-input v-model="searchMsg" placeholder="搜索" class="handle-input mr10" @blur="handleSearch"></el-input>
		    </div>	
        </div>
			<el-table 
				:header-cell-style="{color:'#2A62BC'}"
			 	:data="tableData"   
			 	style="width: 100%;" 
                size="small"
                border
				stripe> 
            <el-table-column type="expand">
				<template #default="props">
			     <el-table :data="tableDataSub" 
				 :header-cell-style="{color:'#2A62BC'}"
				 :border="true"
				 height="150"
				 size="small"
				 style="width: 90%; margin-left: 125px;"
				 >
                	<el-table-column label="节编号" prop="id" align="center" width="80"/>
            		<el-table-column label="节名称" prop="nodeName" />
            		<el-table-column label="节描述" prop="nodeDesc" />
            		<el-table-column label="操作" width="220" align="center" >
					<template #default="scope">                     
					<el-row class="right-btn-1">
						<el-tooltip content="修改" placement="bottom-start" effect="light">
						    <el-button color="#0ab394" :icon="Edit" @click="addSubsectionSub(scope.row)" ></el-button>
				        </el-tooltip>
						<el-tooltip content="删除" placement="bottom-start" effect="light">  
							<el-button color="#e35148" :icon="Delete"  @click="handleDeleteSub(scope.$index)"></el-button>
						</el-tooltip>
						<el-tooltip content="关联视频" placement="bottom-start" effect="light">  
							<el-button color="#e35148"  @click="uploadVideo(scope.$index)">
								<i class="iconfont icon-wrench-fill .white"></i>
							</el-button>
						</el-tooltip>
						<!-- <el-tooltip content="未登录可观看" placement="bottom-start" effect="light">  
							<el-button color="#e35148"  @click="isLook= !isLook">
								<i class="iconfont icon-lock3 .white"></i>
							</el-button>
						</el-tooltip> -->
					</el-row>
				</template>
				
			</el-table-column>
		</el-table>
		</template>
	</el-table-column>
				<el-table-column  prop="id" label="章节编号"  align="center" width="80"></el-table-column>
				<el-table-column prop="chapterName" label="章节名称" align="center"></el-table-column>
                <el-table-column prop="chapterDesc" label="章节描述" align="center"></el-table-column>
				<el-table-column label="启用状态" align="center" >
                    <template #default="scope">
                        <el-switch
                                v-model="scope.row.status"
                                :active-value="'启用'"
                                :inactive-value="'不启用'"
                                active-color="#64bd63"
                                inactive-color="#c0c0c0"
                                
                                @change="changeSwitch(scope.row.status)"/>
					</template>
                </el-table-column>
				<el-table-column label="操作" width="220" align="center" >
					<template #default="scope">
						<el-row class="right-btn">
						    <el-button color="#0ab394" :icon="Edit" @click="open(scope.$index,scope.row)">修改</el-button>	  
							<el-button color="#e35148" :icon="Delete"  @click="handleDelete(scope.$index)" >删除</el-button>
							<el-button color="#23c001"   @click="addSubsection(scope.row)" >
                            <i class="iconfont icon-jiahao1 white"></i>添加节</el-button>
						</el-row>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<div class="pagination">
				<el-pagination
				:current-page="query.pageIndex"
					:page-size="query.pageSize"
					:page-sizes="[5, 10, 15, 20]"
					:small="small"
					layout="total, sizes, prev, pager, next, jumper"
					:total="pageTotal"
					@size-change="handleSizeChange"
					@current-change="handlePageChange"/>
			</div>
	</div>

		<!-- 修改/添加弹出框 -->
		<el-dialog :title="titleEdit" v-model="editVisible" width="30%" >
			<el-form label-width="75px">
				<el-form-item label="课程编号:" disabled >
					<el-input v-model="form.courseName"  :disabled="isDisable" ></el-input>
				</el-form-item>
				              
				<el-form-item label="章节名称:">
					<el-input v-model="form.chapterName"></el-input>
				</el-form-item>   
				<el-form-item label="章节编号:">
                    <el-input-number
                        v-model="form.id"
                        controls-position="right"
                        style="width: 80px;"
                    />
				</el-form-item>               
                <el-form-item label="是否启用:">
					<el-switch
                                v-model="form.status"
                                :active-value="'启用'"
                                :inactive-value="'不启用'"
                                active-color="#64bd63"
                                inactive-color="#c0c0c0"/>	
				</el-form-item>

                <el-form-item label="章描述:">
					<el-input v-model="form.chapterDesc"  type="textarea" ></el-input>
				</el-form-item>
              
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button  @click="editVisible = false">关闭</el-button>
					<el-button color="#0ab394" @click="saveEdit">确 定</el-button>
				</span>
			</template>
		</el-dialog>

    <!--添加节的弹窗  -->
		<el-dialog title="新增节" v-model="addSubVisible" width="30%" >
			<el-form label-width="75px">              
				<el-form-item label="章节名称:" >
					<el-input v-model="formNode.chapterName" disabled></el-input>
				</el-form-item>                
				<el-form-item label="节编号:" >
					<el-input v-model="formNode.jid" ></el-input>
				</el-form-item>                
				<el-form-item label="节名称:" >
					<el-input v-model="formNode.nodeName" ></el-input>
				</el-form-item>                
				<el-form-item label="是否实验:" >
	
						<el-select v-model="formNode.experiment" :suffix-icon="CaretBottom" 
						style="width: 300px;"
						clearable
						filterable
						placeholder=""
						:fit-input-width="true"
						placement="bottom-end"
						:popper-append-to-body="false" popper-class="my-select"
						>
						<el-option label="开启实验" value="0"></el-option>
						<el-option label="不开启实验" value="1"></el-option>
						</el-select>
				</el-form-item>                
                <el-form-item label="节描述:">
					<el-input v-model="formNode.nodeDesc"  type="textarea"  style="width: 300px;"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button  @click="addSubVisible = false">关闭</el-button>
					<el-button color="#0ab394" @click="saveNode">确 定</el-button>
				</span>
			</template>
		</el-dialog>

          <!-- 子修改/添加弹出框 -->
		<el-dialog title="新增节" v-model="addSubZiVisible" width="750" >
			<el-form label-width="100px"  label-position="left" :inline="true" >              
				<el-form-item label="章节名称:" >
					<el-input v-model="formNode.chapterName" disabled></el-input>
				</el-form-item>                
				<el-form-item label="节编号:" >
					<el-input v-model="formNode.jid" ></el-input>
				</el-form-item>                
				<el-form-item label="节名称:" >
					<el-input v-model="formNode.nodeName" ></el-input>
				</el-form-item>                
				<el-form-item label="是否实验:" >
					<el-input v-model="formNode.experiment" ></el-input>
				</el-form-item>                
				<el-form-item label="实验简介:" >
					<el-input v-model="formNode.experimentDesc" ></el-input>
				</el-form-item>                
				<el-form-item label="实验文档:" >
					<el-input v-model="formNode.experimentDucumentFile" ></el-input>
				</el-form-item>                
				<el-form-item label="实验环境地址:" >
					<el-input v-model="formNode.experimentEnvironmentAddr" ></el-input>
				</el-form-item>                
                <el-form-item label="节描述:">
					<el-input v-model="formNode.nodeDesc"  type="textarea" ></el-input>
				</el-form-item>
              
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button  @click="addSubZiVisible = false">关闭</el-button>
					<el-button color="#0ab394" @click="saveNode">确 定</el-button>
				</span>
			</template>
		</el-dialog>
		<!-- 视频上传弹框 -->
		<el-dialog title="上传视频" v-model="uploadVisible" width="30%" >
			<el-form label-width="75px">              
				<el-form-item label="视频标题:" >
					<el-input v-model="formVideo.title"></el-input>
				</el-form-item>                
				<el-form-item label="视频时长:" >
					<el-input v-model="formVideo.time" ></el-input>
				</el-form-item>                
				<el-form-item label="视频上传:" >
					<el-input v-model="formVideo.videoFile"  type="file"></el-input>
				</el-form-item>                
				<el-form-item label="视频地址:" >
					<el-input v-model="formVideo.videoAddr"  placeholder="请输入视频上传(服务器)地址"></el-input>
				</el-form-item>                
              
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button  @click="uploadVisible = false">关闭</el-button>
					<el-button color="#0ab394" @click="toUploadVideo">确 定</el-button>
				</span>
			</template>
		</el-dialog>

		<!-- </div> -->
	</div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Setting,CaretBottom} from '@element-plus/icons-vue';
import { getChapters,getChapterSubs } from '../../api/training' ;

const  searchMsg = ref()
// 选择表格的行菜单ID
const selectedRowMenuId = ref();
function onRowClick(row) {
  selectedRowMenuId.value = row.id;
}

//分页字体
const small = ref(true)
// const size = ref<'default' | 'large' | 'small'>('default')


//分页数据
const query = reactive({
	pageIndex: 1,
	pageSize: 10,
});
//

//表格数据
const tableData = ref();
const tableDataSub = ref();
//总页数
const pageTotal = ref(0);

// 获取表格数据  分页是数据截取  后台结合一起后  直接返回分页的后的数据
const getData = () => {
    getChapters({pageCurrent:query.pageIndex,pageSize:query.pageSize}).then(res=>{
        console.log(res,"---res---")
        // tableData.value = res.data.
		let start  = (query.pageIndex-1)*query.pageSize;//开始位置
        let end =query.pageIndex*query.pageSize  ;//结束位置 数组的截取的时候 [start,end) suo所以不用-1
        tableData.value = res.data.slice(start,end);
        // tableData.value = res.data;
        pageTotal.value = res.data.length
    })
	getChapterSubs().then(res=>{
		tableDataSub.value = res.data
	})
	
};
getData();

// 分页导航
const handleSizeChange = (val) => {
  // console.log(`${val} items per page`)
  query.pageSize = val;
  getData()
}
const handlePageChange = (val) => {
	query.pageIndex = val;
	console.log(val,"==")
	console.log(query.pageSize)
	getData()
};

//是够启用调用后台接口
const  changeSwitch=(status)=>{
    //1 调用后台修改接口
    console.log(status,'>>>status');
	//2 重新查询数据
}

// 删除单个操作
const handleDelete = (index) => {
	// 二次确认删除
	ElMessageBox.confirm('确定要删除吗？', '提示', {
		type: 'warning'
	})
	.then(() => {
		ElMessage.success('删除成功');
		//to 传递id 到后台 
		tableData.value.splice(index, 1);
		// 删除成功后
		// getData()
	})
	.catch(() => {});
};



// 查询操作  to... 需要自己实现与后台交互
const handleSearch = () => {
	query.pageIndex = 1;
	getData();
};

// 表格编辑时弹窗和保存
const editVisible = ref(false);
let form = reactive({
    id:'',
	courseName: '',
    chapterName:'',
    chapterDesc:'',
    status:'',
});

// 
let titleEdit = ref('修改')
let isDisable = ref(true)
const open  = (index,row)=>{//index是时间源对象
	if(row){
        isDisable.value=true
		titleEdit.value = "修改"
		handleEdit(index,row)
	}else{
		//把第一个输出改为可编辑
		isDisable.value=false
		//清空表单中的数据
		titleEdit.value = "添加";
        form.id=''
		form.courseName=''
		form.chapterName=''
		form.chapterDesc=''
		form.status=''
		editVisible.value = true	
	}
	console.log('-------测试传值-------')
	// console.log(index,row,index.target.innerText)
	// console.log(index,row)
	// console.log('================')

}
let idx = -1;
const handleEdit = (index,row) => {
	idx = index;
    form.id = row.id;
	form.courseName = row.courseName;
    form.chapterName = row.chapterName
    form.chapterDesc = row.chapterDesc
	form.status = row.status
	editVisible.value = true;
};
//保存添加或者修改的数据 ---需要重新实现
const saveEdit = () => {
	editVisible.value = false;
	ElMessage.success(`修改第 ${idx + 1} 行成功`);
	tableData.value[idx].courseName = form.courseName;
	tableData.value[idx].chapterName= form.chapterName;
    tableData.value[idx].chapterDesc = form.chapterDesc;
    tableData.value[idx].status = form.status;
};

//添加小节
const  addSubVisible = ref(false)
const  formNode = reactive({
    chapterName:'',
	jid:'',
	nodeName:'',
	experiment:'',               
	experimentDesc:'',
	experimentDucumentFile:'',
	experimentEnvironmentAddr:'',
	nodeDesc:''
			
})
const addSubsection=(row)=>{
	formNode.chapterName = row.chapterName
    addSubVisible.value= true;

}
const  addSubZiVisible = ref(false)
const addSubsectionSub=(row)=>{
	formNode.chapterName = row.chapterName
    addSubZiVisible.value= true;

}
//保存节数据
const saveNode=()=>{
    addSubVisible.value = false;
    //保存调用后端程序 需要自己实现to...

}

//删除子节点
const  handleDeleteSub=(index)=>{
	// 二次确认删除
	ElMessageBox.confirm('确定要删除吗？', '提示', {
		type: 'warning'
	})
	.then(() => {
		ElMessage.success('删除成功');
		//to 传递id 到后台 
		tableDataSub.value.splice(index, 1);
		// 删除成功后
		
	}).catch(() => {});
}

//视频上传 
const  formVideo = reactive({
	title:'',
	time:'',
	videoFile:'',
	videoAddr:''
})

const uploadVisible =ref(false)
const uploadVideo =(index)=>{
	uploadVisible.value = true
}
//视频上传调用后台接口 
const toUploadVideo=()=>{
	//调用接口
}
//未登录是否可看
const isLook = ref(false)
</script >
<style lang="less" scoped>
.handle-box {
	margin-bottom: 20px;  
    .div-input{
        float: right;
        margin-bottom: 20px;
    }

}

.el-select {
	width: 200px;
	margin-right: 10px;  
}

.handle-input {
	width: 200px;
    margin-right: 10px;
}
.label{
   display: inline-block;
   max-width:100%;
   margin: 5px;
   font-weight: 700; 
}
.table {
	width: 100%;
	font-size: 14px;
}
.red {
	color: #F56C6C;
}
.blue {
	color: #1296e2;
	font-weight: bold;
}

.mr10 {
	margin-right: 10px;
}
.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
.cell{
    display: inline-block;
    .el-button{
        margin-left: 0px;
    }
}
.el-col {
  border-radius: 4px;
  margin-left: 10px;
}

.top-btn{
	float: left;
	.el-button{
		margin-left: 5px;
	}
}
.right-btn{
 	justify-content:center;
	.el-button{
		height: 22px;
		width: 50px;
		margin-right: 10px;
		padding: 1px 5px;
        font-size: 12px ;
	}
}
.right-btn-1{
 	justify-content:center;
	.el-button{
		height: 22px;
		width: 20px;
		margin-right: 10px;
		padding: 1px 5px;
        font-size: 12px ;
	}
}
.white{
	color:#fff;
}
.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}

</style>